<template>
	<view class="content" :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }">
		<hearbar></hearbar>
		<view class="p-a-l">
			<view class="body back-white b-a p-l-ll p-r-ll">
				<view class="avatar flex align-center flex-between" @click="setting">
					<view class="flex">
						<up-avatar :src="formData.img_url" size="48"></up-avatar>
						<view class="m-l flex fle flex-col flex-between">
							<view>{{ formData.nick_name }}</view>
							<view class="flex align-center">
								<view class="font-12">{{ formData.sgin ?  formData.sgin: "介绍一下你自己把..."  }}</view>
								<up-icon name="edit-pen" size="16"></up-icon>
							</view>
						</view>
					</view>
					<!-- 	<view class="info"></view> -->
					<view><up-icon name="setting-fill" size="24"></up-icon></view>
				</view>
				<up-line></up-line>
				<view class="info flex flex-around align-center">
					<view @click="goFriends(0)">
						<view class="text-center">{{JSON.parse(formData.atts).length }}</view>
						<view @click="goFriends(0)">关注</view>
					</view>
					<up-line direction="col" length="20%"></up-line>
					<view @click="goFriends(1)">
						<view class="text-center">{{JSON.parse(formData.fans).length }}</view>
						<view >粉丝</view>
					</view>
					<up-line direction="col" length="20%"></up-line>
					<view>
						<view class="text-center">0</view>
						<view>帖子</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script setup>
import {
	useConfigStore
} from "../../stores/modules/config"
import {
	checkLogin
} from "../../utils/common";
import {
	ref,
	reactive,
	onMounted
} from 'vue';
import {
	getUserInfo
} from "../../utils/api";
const configStore = useConfigStore();
const setting = () => {
	const login = checkLogin();
	if (!login) {
		uni.navigateTo({
			url: "/pages/login/index"
		})
	} else {
		uni.navigateTo({
			url: "/pages/home/config"
		})
	}
}
const formData = reactive({
	nick_name: "",
	sex: "",
	img_url: ""
})
const goFriends = (type) =>{
	uni.redirectTo({
		url: `/pages/home/friends?type=${type}`
	})
}

onMounted(() => {
	getUserInfo().then((res) => {
		if (res.code === 200) {
			Object.assign(formData, res.data);
		}
	})
})
</script>
<style lang="less" scoped>
.body {
	border-radius: 50upx;
	height: 300upx;
}

.avatar {
	height: 150upx;
}

.info {
	height: 150upx;
	width: 100%;
}
</style>